<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="back-button" @click="goBack">
          <i class="el-icon-arrow-left"></i>
          <span>返回列表</span>
        </div>
        <h2 class="title">{{ clazzInfo.grade }}级{{ clazzInfo.name }}</h2>
      </div>
    </div>

    <!-- 内容区域 -->
    <el-row :gutter="20" class="info-section">
      <!-- 左侧基本信息 -->
      <el-col :span="16">
        <el-card shadow="hover" class="info-card">
          <div class="card-header">
            <i class="el-icon-info"></i>
            <span>班级基本信息</span>
          </div>
          <div class="info-content">
            <!-- 基本信息展示 -->
            <div class="basic-info">
              <div class="info-row">
                <div class="info-item">
                  <span class="label"><i class="el-icon-reading"></i>年级</span>
                  <span class="value highlight">{{ clazzInfo.grade }}级</span>
                </div>
                <div class="info-item">
                  <span class="label"><i class="el-icon-user"></i>班长</span>
                  <span class="value">{{ clazzInfo.leader }}</span>
                </div>
              </div>
              <div class="info-row">
                <div class="info-item">
                  <span class="label"><i class="el-icon-phone"></i>联系方式</span>
                  <span class="value">{{ clazzInfo.phone }}</span>
                </div>
                <div class="info-item">
                  <span class="label"><i class="el-icon-user-solid"></i>班级人数</span>
                  <span class="value highlight">{{ clazzInfo.number }}人</span>
                </div>
              </div>
              <div class="info-row">
                <div class="info-item full-width">
                  <span class="label"><i class="el-icon-document"></i>备注信息</span>
                  <span class="value">{{ clazzInfo.remark || '暂无备注' }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧统计信息 -->
      <el-col :span="8">
        <el-card shadow="hover" class="stats-card">
          <div class="card-header">
            <i class="el-icon-data-line"></i>
            <span>班级统计</span>
          </div>
          <div class="stats-content">
            <div class="stats-item">
              <div class="stats-value">{{ studentList.length }}</div>
              <div class="stats-label">总人数</div>
            </div>
            <el-divider></el-divider>
            <div class="stats-item">
              <div class="stats-value">{{ getActiveCount }}</div>
              <div class="stats-label">活跃人数</div>
            </div>
            <el-divider></el-divider>
            <div class="stats-value-chart">
              <div class="chart-title">活跃度</div>
              <el-progress 
                type="circle" 
                :percentage="getActiveRate" 
                :stroke-width="10"
                :color="getProgressColor"
              ></el-progress>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 学员列表 -->
    <el-card class="student-card" shadow="hover">
      <div slot="header" class="card-header">
        <div class="header-left">
          <i class="el-icon-user"></i>
          <span>班级学员名单</span>
        </div>
        <div class="header-right">
          <el-input
            v-model="searchValue"
            placeholder="搜索学员"
            prefix-icon="el-icon-search"
            clearable
            size="small"
            class="search-input"
          />
        </div>
      </div>

      <!-- 学员表格 -->
      <el-table
        v-loading="loading"
        :data="filteredStudentList"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column label="学号" prop="studentId" align="center" />
        <el-table-column label="姓名" prop="nickName" align="center" />
        <el-table-column label="联系方式" prop="phonenumber" align="center" />
        <el-table-column label="邮箱" prop="email" align="center" />
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { clazzDetails } from "@/api/manager/clazz/clazz";

export default {
  name: 'ClassDetail',
  data() {
    return {
      // 班级基本信息
      clazzInfo: {
        clazzId: undefined,
        grade: '',
        name: '',
        leader: '',
        phone: '',
        number: 0,
        remark: ''
      },
      // 学员列表
      studentList: [],
      // 搜索关键词
      searchValue: '',
      // 加载状态
      loading: false,
      // 活跃统计
      activeStats: {
        total: 0,
        active: 0
      }
    }
  },
  computed: {
    // 过滤后的学员列表
    filteredStudentList() {
      if (!this.searchValue) return this.studentList;
      const keyword = this.searchValue.toLowerCase();
      return this.studentList.filter(student => 
        student.nickName.toLowerCase().includes(keyword) ||
        student.studentId.toLowerCase().includes(keyword)
      );
    },
    // 获取活跃人数
    getActiveCount() {
      return this.activeStats.active || 0;
    },
    // 获取活跃率
    getActiveRate() {
      return this.studentList.length ? 
        Math.round((this.activeStats.active / this.studentList.length) * 100) : 0;
    },
    // 获取进度条颜色
    getProgressColor() {
      const rate = this.getActiveRate;
      if (rate < 30) return '#F56C6C';
      if (rate < 70) return '#E6A23C';
      return '#67C23A';
    }
  },
  created() {
    // 解析路由传递的班级信息
    const classInfoStr = this.$route.query.classInfo;
    if (classInfoStr) {
      this.clazzInfo = JSON.parse(classInfoStr);
    }
    this.getClassDetails();
  },
  methods: {
    // 返回列表页
    goBack() {
      this.$router.push('/manager/clazz');
    },
    // 获取班级详情
    getClassDetails() {
      this.loading = true;
      const params = {
        clazzId: this.clazzInfo.clazzId
      };
      clazzDetails(params).then(response => {
        this.studentList = response.rows || [];
        // 计算活跃统计
        this.activeStats = {
          total: this.studentList.length,
          active: this.studentList.filter(s => s.status === '1').length
        };
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 删除学员
    handleDelete(row) {
      this.$modal.confirm('确认将该学员移出班级吗？').then(() => {
        // TODO: 调用后端API移除成员
        this.$modal.msgSuccess("移除成功");
        this.getClassDetails();
      }).catch(() => {});
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 24px;
  min-height: calc(100vh - 84px);
  background: #ffffff;
}

.page-header {
  padding: 16px 24px;
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

  .header-content {
    display: flex;
    align-items: center;

    .back-button {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #409EFF;
      margin-right: 20px;
      transition: all 0.3s;

      i {
        margin-right: 6px;
      }

      &:hover {
        opacity: 0.8;
      }
    }

    .title {
      margin: 0;
      font-size: 20px;
      color: #303133;
      font-weight: 600;
    }
  }
}

.info-section {
  margin-bottom: 24px;
}

.info-card, .stats-card {
  height: 100%;
  border-radius: 8px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }

  .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f2f5;
    font-size: 16px;
    font-weight: 600;
    color: #303133;

    i {
      margin-right: 8px;
      color: #409EFF;
    }
  }
}

.basic-info {
  padding: 20px;

  .info-row {
    display: flex;
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .info-item {
      flex: 1;
      padding: 0 15px;

      &.full-width {
        flex: 2;
      }

      .label {
        display: block;
        color: #909399;
        margin-bottom: 8px;
        font-size: 13px;

        i {
          margin-right: 4px;
          font-size: 14px;
        }
      }

      .value {
        font-size: 14px;
        color: #303133;

        &.highlight {
          color: #409EFF;
          font-weight: bold;
          font-size: 16px;
        }
      }
    }
  }
}

.stats-content {
  padding: 20px;
  text-align: center;

  .stats-item {
    padding: 15px 0;

    .stats-value {
      font-size: 24px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 8px;
    }

    .stats-label {
      font-size: 14px;
      color: #909399;
    }
  }

  .stats-value-chart {
    padding: 20px 0;

    .chart-title {
      margin-bottom: 15px;
      font-size: 14px;
      color: #909399;
    }
  }
}

.student-card {
  border-radius: 8px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;

    .header-left {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #303133;

      i {
        margin-right: 8px;
        color: #409EFF;
      }
    }

    .search-input {
      width: 200px;
    }
  }

  ::v-deep {
    .el-table {
      border-radius: 8px;
      overflow: hidden;
      margin-top: 20px;

      th {
        background-color: #fafafa;
        color: #606266;
        font-weight: 600;
      }

      .el-button.is-circle {
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
}
</style> 